<template>
  <div
    class="pdf-box"
  >
    <!--此处根据pdf的页数动态生成相应数量的canvas画布-->
    <canvas
      id="pdf-canvas"
      style="display: block"
    />
    <el-pagination
      :page-size="1"
      :default-page-size="1"
      background
      layout="prev, pager, next"
      class="mt-4 pager"
      :total="pdfPages"
      @current-change="currentChangeHandle"
    />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick, computed } from "vue";
import {useRoute} from 'vue-router'
import http from '@u/request.js'
import URLS from '@api/api'
import { ElLoading } from 'element-plus'

import {resultHandle} from '@/common/common'

//注意引入的写法
import * as pdfjsLib from "pdfjs-dist/build/pdf";
const route = useRoute()
let pdfDoc = reactive({}); // 保存加载的pdf文件流
let pdfPages = ref(0); // pdf文件的页数
let pdfScale = ref(1); // 缩放比例
//调用loadFile方法
onMounted(() => {
    const {uuId} = route.query
    http.post(URLS.PDF_QUERY_BY_UUID,{uuId}).then(res=>{
        resultHandle(res,()=>{
            const {docId,groupId}=res.data
            const url = location.origin+`/${groupId}/${docId}`
            loadFile(url);
        })
    })
});
//获取pdf文档流与pdf文件的页数
const loadFile = async (url) => {
    pdfjsLib.GlobalWorkerOptions.workerSrc ="/pdf.worker.min.js";
    const loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then((pdf) => {
        pdfDoc = pdf;
        pdfPages.value = pdf.numPages;
        nextTick(() => {
            renderPage(1);
        });
    });
};
//渲染pdf文件
const renderPage = (num) => {
    pdfDoc.getPage(num).then((page) => {
        const canvasId = "pdf-canvas";
        const canvas = document.getElementById(canvasId);
        const ctx = canvas.getContext("2d");
        const dpr = window.devicePixelRatio || 1;
        const bsr =ctx.webkitBackingStorePixelRatio ||ctx.mozBackingStorePixelRatio ||ctx.msBackingStorePixelRatio ||ctx.oBackingStorePixelRatio ||ctx.backingStorePixelRatio ||1;
        const ratio = dpr / bsr;
        const viewport = page.getViewport({ scale: pdfScale.value });
        canvas.width = viewport.width * ratio;
        canvas.height = viewport.height * ratio;
        canvas.style.width = window.screen.width>viewport.width?viewport.width: '90vw';
        canvas.style.height = window.screen.width>viewport.width?viewport.height:90*viewport.height/viewport.width+'vw';
        canvas.style.boxShadow = "0 0 10px";
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
        const renderContext = {
            canvasContext: ctx,
            viewport: viewport,
        };
        page.render(renderContext);
    });
};

const currentChangeHandle=(page)=>{
    renderPage(page)
}

const cssTop = computed(()=>{
    const {width,height}=screen
    return width>height?'0':'20vw'
})
</script>
<style lang="scss">
.pdf-box {
    padding-top: v-bind(cssTop);
    #pdf-canvas{
        margin: 0 auto ;
    }
    .pager{
        position: fixed;
        left: 50%;
        bottom: 10vh;
        transform: translateX(-50%);
    }
}
</style>